<!-- 修改密码 -->
<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>修改密码</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-form ref="passwordFormRef" :model="passwordForm" :rules="rules" v-loading="loading" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="10">
            <el-form-item label="旧密码：" prop="old_password">
              <el-input v-model="passwordForm.old_password" type="password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="10">
            <el-form-item label="新密码：" prop="new_password">
              <el-input v-model="passwordForm.new_password" type="password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="10">
            <el-form-item label="确认密码：" prop="samePassword">
              <el-input v-model="passwordForm.samePassword" type="password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-footer" label-width="100px">
        <el-button type="primary" :disabled='disabledbtn' @click="submitForm(passwordFormRef, passwordForm, 'PUT')">
          确 定
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { api as Request } from '../../utils/api';
import { useSamePasswordVerify } from '@/hooks/useDataVerify.js';

const disabledbtn = ref(false);
const loading = ref(false);
const passwordFormRef = ref('');
const passwordForm = reactive({
  old_password: '',
  new_password: '',
  samePassword: ''
});

const rules = {
  old_password: [
    { required: true, message: '旧密码必填', trigger: 'blur' }
  ],
  new_password: [{ required: true, message: '新密码必填', trigger: 'blur' }],
  samePassword: [
    {
      required: true,
      validator: (rule, value, callback) => { useSamePasswordVerify(rule, value, callback, passwordForm.new_password) },
      trigger: 'blur'
    }
  ]
}
/* 表单数据初始化 */
const initData = () => {
  passwordForm.old_password = '';
  passwordForm.new_password = '';
  passwordForm.samePassword = '';
  passwordFormRef.resetFields();
}
/* 保存或编辑 */
const submitForm = (formEl, formData, type) => {
  formEl.validate((valid) => {
    if (valid) {
      submitFormInfo(formData, type);
    } else {
      /* 提示还有需要填写的信息 */
      ElMessage.warning('请填写所有必填信息');
      return false;
    }
  });
  const submitFormInfo = (formData, type) => {
    /* 防止多次提交 */
    disabledbtn.value = true;
    Request.updateChangepwdInfo(formData, type)
      .then((res) => {
        disabledbtn.value = false;
        if (res.status === 1) {
          ElMessage.success(res.msg);
          initData();
        } else {
          ElMessage.error(res.msg);
        }
      })
      .catch((res) => {
        disabledbtn.value = false;
      });
  }
}
</script>
<style scoped>
.container .dialog-footer {
  margin-left: 100px;
}
</style>